import React, { Component } from 'react'
import RouterViews from '../../router/router.view'

export default class Home extends Component {
    state={
        nav:[
            {
                name:"首页",
                icon:'icon-earth',
                path:'/home/main'
            },
            {
                name:"我的",
                icon:'icon-bussiness-man',
                path:'/home/my'
            }
        ],
        defaultKey:this.props.location.pathname==='/home'?'/home/main':this.props.location.pathname
    }
 
    jumpUrl = path =>{
       
        //跳转 高亮
        this.setState({defaultKey:path},()=>this.props.history.push(path))
    }
    render() {
        const {nav,defaultKey} = this.state
        return (
            <div className="home"> 

                {/* 内容 */}
                <div className="content"><RouterViews routers={this.props.routers}/></div>

                {/* 底部导航 */}
                <div className="nav">
                   {
                       nav.map((item,key)=>{
                            return <div className={defaultKey === item.path?'active':''} key={key} onClick={()=>this.jumpUrl(item.path)}>
                                <span className={['iconfont',item.icon].join(' ')}></span>
                                <span>{item.name}</span>
                            </div>
                       })
                   }
                    
                </div>
            </div>
        )
    }
}

// react 底层基于diff算法 diff算法依赖于这个key 

